<html>
  <head>
    <style>
      html, body{
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
      }
      body {
        background: #1e2124;
        color: #6c757d;
        font-family: Arial, Helvetica, sans-serif;
      }
      .aligner-center-center{
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .aligner-content{
        position: relative;
        width: 100%;
        padding: 80px;
      }
      svg{
        position: relative;
        width: 100%;
      }
      .loading{
        padding-top: 10px;
        position: relative;
      }
      .bar{
        position: relative;;
        height: 2px;
        background: #262b2f;
      }
      .progress{
        position: relative;
        height: 2px;
        background: #3d90ce;
        box-shadow: 0 0 20px #3d90ce;
        animation-name: loader-animation;
        animation-duration: 1.6s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
      }

    @keyframes loader-animation{
      0% {
        left: 0;
        width: 0px;
      }
      50% {
        left: 0;
        width: 100%;
      }
      100% {
        left: 100%;
        width: 0px;
      }
    }
    .glow-wrapper{
      position: relative;
      width: 100%;
      height: 2px;
      top: -2px;
    }

    .glow{
      height: 100%;
      display: flex;
      transform: translateZ(0);
    }

    .glow div{
      flex: 1;
      background: #3d90ce;
      animation: glow 0.8s infinite alternate ease;
      box-shadow: 0 0 20px #3d90ce;
    }

    .glow div.b1{ animation-delay: -0.72s; }
    .glow div.b2{ animation-delay: -0.64s; }
    .glow div.b3{ animation-delay: -0.56s; }
    .glow div.b4{ animation-delay: -0.48s; }
    .glow div.b5{ animation-delay: -0.40s; }
    .glow div.b6{ animation-delay: -0.32s; }
    .glow div.b7{ animation-delay: -0.24s; }
    .glow div.b8{ animation-delay: -0.16s; }
    .glow div.b9{ animation-delay: -0.08s; }


    @keyframes glow{
      100% {
        background: transparent;
        flex: 10;
        box-shadow: 0 0 0 transparent;
      }
    }

    .text{
      height: 20px;
      line-height: 20px;
      text-align: center;
      margin-top: 5px;
    }

    </style>
  </head>
  <body>
    <div class="aligner-center-center">
      <div class="aligner-content">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 497.43 228.97">
          <defs>
            <style>.cls-1{fill:#3f90ce;}</style>
          </defs>
          <g id="Layer_2" data-name="Layer 2">
            <g id="Layer_1-2" data-name="Layer 1">
              <path class="cls-1" d="M0,0H12.25V170H110v11.64H0Z"/>
              <path class="cls-1" d="M138.75,167.24Q122.82,148,122.82,116.39t15.93-50.84q15.93-19,42.27-19T223.29,64q15.92,17.46,15.93,46.55v5.82H135.08q0,26.65,12.55,42.58T181,174.9a50.14,50.14,0,0,0,28.18-8.27A44.23,44.23,0,0,0,227,144.27h12.25q-3.08,18.07-19.61,30T181,186.23Q154.68,186.23,138.75,167.24ZM227,104.75v-4.59a46.49,46.49,0,0,0-14.71-30.63A45.05,45.05,0,0,0,181,57.28a43.4,43.4,0,0,0-30.94,12.56,47.58,47.58,0,0,0-15,31.54v3.37Z"/>
              <path class="cls-1" d="M268,181.64V51.15h12.25V73.21a41.83,41.83,0,0,1,16.85-18.38,46.6,46.6,0,0,1,25.12-7q19.29,0,32.77,12.56Q368.79,73.21,368.78,91v90.67H356.53V91a30.37,30.37,0,0,0-10.11-23,34.12,34.12,0,0,0-24.19-9.5A40.35,40.35,0,0,0,295,68.92a45.21,45.21,0,0,0-14.7,26.65v86.07Z"/>
              <path class="cls-1" d="M409.83,172.75Q395.12,160.51,395.12,143h11.34q0,13.17,11.33,22.67,11.32,9.18,27.26,9.19,18.38,0,29.71-8.27a27,27,0,0,0,11-22.36q0-10.41-11.64-17.77-11.64-7-31.24-8.88-20.84-1.84-33.08-11.64-12.57-9.8-12.56-24.2,0-16.23,12.56-25.11t35.22-8.89q21.75,0,34.61,9.5,13.17,9.5,13.17,25.42H481.19A28.06,28.06,0,0,0,469.55,64q-9.49-6.73-24.5-6.74-16.55,0-26.34,6.74t-9.8,17.76q0,10.43,11.94,17.77,11.64,7,31.25,8.88,20.5,1.84,33.08,12.25,12.24,10.42,12.25,26,0,17.46-14.4,27.87Q468.95,185,445.05,185,424.22,185,409.83,172.75Z"/>
            </g>
          </g>
        </svg>
        <div class="loading">
          <div class="bar">
            <div class="progress"></div>
          </div>
          <div class="glow-wrapper">
            <div class="glow">
              <div class="b1"></div>
              <div class="b2"></div>
              <div class="b3"></div>
              <div class="b4"></div>
              <div class="b5"></div>
              <div class="b6"></div>
              <div class="b7"></div>
              <div class="b8"></div>
              <div class="b9"></div>
            </div>
          </div>
          <div class="text">
            Loading...
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
